<template>
  <div
    v-loading="loading"
    class="app-container"
    :element-loading-text="loadingText"
  >
    <!-- 挂号编号的查询条件开始 -->
    <el-card style="margin-bottom: 8px">
      <el-form ref="queryForm" label-width="88px">
        <el-form-item label="挂号单ID" prop="regId">
          <el-input v-model="regId" clearable size="small" style="width: 300px;" />
          <el-button type="primary" icon="el-icon-search" style="margin-left: 10px" size="mini" @click="handelQuery">查询
          </el-button>
          <el-button type="warning" icon="el-icon-search" size="mini" @click="handelQuery">读取IC卡(功能放在这里--需要IC卡读取器)
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 挂号编号的查询条件结束 -->

    <!-- 挂号输入框下面的所有内容开始 -->
    <div v-if="careHistory.regId !== undefined">
      <!-- 病例信息开始 -->
      <el-card style="margin-bottom: 8px">
        <el-form label-position="left" label-width="120px" inline class="demo-table-expand">
          <el-form-item label="挂号单号">
            <span v-text="careHistory.regId" />
          </el-form-item>
          <el-form-item label="医生姓名:">
            <span v-text="careHistory.userName" />
          </el-form-item>
          <el-form-item label="科室名称:">
            <span v-text="careHistory.deptName" />
          </el-form-item>
          <el-form-item label=" 患者姓名:">
            <span v-text="careHistory.patientName" />
          </el-form-item>
          <el-form-item label="就诊时间:">
            <span v-text="careHistory.careTime" />
          </el-form-item>
          <el-form-item label="主诉:">
            <span v-text="careHistory.caseTitle" />
          </el-form-item>
          <el-form-item label="诊断信息:">
            <span v-text="careHistory.caseResult" />
          </el-form-item>
          <el-form-item label="医生建议:">
            <span v-text="careHistory.doctorTips" />
          </el-form-item>
        </el-form>
      </el-card>
      <!-- 病例信息结束 -->
      <!-- 工具按钮开始 -->
      <el-card style="margin-bottom: 5px">
        <el-button type="success" size="mini" icon="el-icon-finished" @click="handleSelectAll">全选</el-button>
        <el-button type="success" size="mini" icon="el-icon-finished" @click="handleUnSelectAll">取消全选</el-button>
        <el-button type="danger" size="mini" icon="el-icon-bank-card" @click="handlePayWithCash">现金支付</el-button>
        <el-button type="primary" size="mini" icon="el-icon-bank-card" @click="handlePayWithZfb">支付宝支付</el-button>
        <span style="margin-left:20px">订单总额:<span style="color:red;margin-left:20px">￥:{{ allAmount }}</span></span>
      </el-card>
      <!-- 工具按钮结束 -->
      <!-- 未支付的处方信息开始 -->
      <el-card style="margin-bottom: 8px">
        <el-collapse v-if="careOrders.length>0" v-model="activeNames">
          <el-collapse-item v-for="(item,index) in careOrders" :key="index" :name="index">
            <template slot="title">
              【{{ item.coType==='0'?'药用处方':'检查处方' }}】【{{ index+1 }}】【处方总额】:￥{{ item.allAmount }}
            </template>
            <el-table
              ref="refTable"
              v-loading="loading"
              :data="item.careOrderItems"
              :row-class-name="tableRowClassName"
              border
              @selection-change="handleCareOrderItemSelectionChange($event,item.coId)"
            >
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column label="序号" align="center" type="index" width="50" />
              <el-table-column :label="item.coType==='0' ? '药品名称' : '项目名称'" align="center" prop="itemName" />
              <el-table-column label="数量" align="center" prop="num" />
              <el-table-column label="单价(元)" align="center" prop="price" />
              <el-table-column label="金额(元)" align="center" prop="amount" />
              <el-table-column label="备注" align="center" prop="remark" />
              <el-table-column label="状态" align="center" prop="status" :formatter="statusFormatter" />
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </el-card>
      <!-- 未支付的处方信息结束 -->
    </div>
    <el-card v-else style="margin-bottom: 8px">
      <div style="text-align:center">请输入正确的挂号单ID查询</div>
    </el-card>
    <!-- 挂号输入框下面的所有内容结束 -->

    <!-- 支付宝弹出成开始 -->
    <el-dialog :visible.sync="openPay" center :close-on-click-modal="false" :before-close="handleClose" append-to-body>
      <el-form label-position="left" label-width="120px" inline class="demo-table-expand">
        <el-card>
          <el-form-item label="订单号：">
            <span>{{ payObj.orderId }}</span>
          </el-form-item>
          <el-form-item label="处方总金额：">
            <span>{{ payObj.allAmount }}</span>
          </el-form-item>
        </el-card>
      </el-form>
      <div style="text-align: center">
        <vue-qr :text="payObj.payUrl" :size="200" />
        <div>请使用支付宝扫码</div>
      </div>
    </el-dialog>
    <!-- 支付宝弹出成结束 -->

  </div>
</template>

<script>
import {
  getNoChargeCareHistoryByRegId,
  createOrderChargeWithCash,
  createOrderChargeWithZfb,
  queryOrderChargeOrderId
} from '@/api/doctor/charge/charge'
// 引入生成二维码的组件
import vueQr from 'vue-qr'

export default {
  components: {
    vueQr
  },
  data() {
    return {
      // 全局遮罩
      loading: false,
      // 设置遮罩的文字
      loadingText: '',
      // 用户输入的挂号单号
      regId: undefined,
      // 病例对象
      careHistory: {},
      // 处方信息
      careOrders: [],
      // 处方详情的状态字典 his_prescription_type
      statusOptions: [],
      // 当前选中的订单总金额
      allAmount: 0.00,
      // 当前选中所有项目的集合
      itemObjs: [],
      // 选中展开的折叠面板的名称
      activeNames: [],
      // 支付宝支付的对象参数
      payObj: {},
      // 是否打开支付宝弹出层
      openPay: false,
      // 定时轮询对象
      intervalObj: undefined

    }
  },
  created() {
    // 加载处方详情的字典
    this.getDataByType('his_order_details_status').then(res => {
      this.statusOptions = res.data
    })
  },
  methods: {
    // 处方翻译
    statusFormatter(row) {
      return this.selectDictLabel(this.statusOptions, row.status)
    },
    // 模糊查询
    handelQuery() {
      this.loading = true
      this.loadingText = '数据查询中，请稍后........'
      // 查询判断 挂号ID
      if (this.regId === undefined || this.regId === '' || this.regId === ' ') {
        this.msgError('请输入挂号单号，才能查出您的病人')
        this.loading = false
        this.loadingText = ''
        this.resetCurrentParams()
      } else {
        this.careHistory = {}
        this.careOrders = []
        // 根据挂号ID 查询 病例 处方  处方详细信息
        getNoChargeCareHistoryByRegId(this.regId).then(res => {
          this.careHistory = res.data.careHistory
          this.careOrders = res.data.careOrders
          this.loading = false
          this.loadingText = ''
          //  根据对象数进行 展开相应的 手风琴 也就是 全部都展开
          this.careOrders.filter((c, index) => {
            this.activeNames.push(index)
          })
        }).catch(() => {
          // this.msgError('查询失败')
          this.loading = false
          this.loadingText = ''
        })
      }
    },
    // 全选
    handleSelectAll() {
      const tables = this.$refs.refTable
      tables.filter(t => {
        t.clearSelection() // 清空选中
        t.toggleAllSelection() // 注意不要用错方法了
      })
    },
    // 取消全选
    handleUnSelectAll() {
      const tables = this.$refs.refTable
      tables.filter(t => {
        t.clearSelection() // 清空选中
      })
    },
    // 区分 处方 表格信息
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex
    },
    /**
     * 监听多个表格的选中事件
     * 获取选中的处方信息(多个表格信息)
     * @param selection 选中的处方对象
     * @param coId 区分处方
     * @dec 拿到选中的表格处方存储到itemObjs当中
     * 进行判断第一次itemObj是否为空
     * 则将选中的数据全部存放其中
     * 如果itemObjs有数据
     * 那么进行循环判断是否有 相同的处方数据
     * 有的话 进行  去除
     * 最后进行注入处理完毕的 处方数据
     */
    handleCareOrderItemSelectionChange(selection, coId) {
      // 存储选中的 项目集合 用于判断一样的 处方 进行去除
      if (this.itemObjs.length === 0) {
        this.itemObjs = selection
      } else {
        // 循环判断 选中的 处方 是否有 上一次 一样的处方 信息
        for (let i = 0; i < this.itemObjs.length; i++) {
          const obj = this.itemObjs[i]
          // 如果有重复的则去掉
          if (obj.coId === coId) {
            this.itemObjs.splice(i, 1)
            i--
          }
        }
        // 最后添加最新的 处方信息
        selection.filter(newItem => {
          this.itemObjs.push(newItem)
        })
      }
      // 计算总额数据
      this.computerAllAmount()
      console.log(this.itemObjs)
    },
    // 计算处方 总价格
    computerAllAmount() {
      this.allAmount = 0
      this.itemObjs.filter(item => {
        this.allAmount += item.amount
      })
    },
    // 现金支付
    handlePayWithCash() {
      if (!this.careHistory.regId) {
        this.msgError('请输入挂号单ID查询')
        return
      } else if (this.itemObjs.length === 0) {
        this.msgError('请选择至少一个项目进行支付')
        return
      } else {
        // 组装收费表数据
        // orderChargeDto --- orderChargeItemDtoList 后端接收名称一致
        const postObj = {
          orderChargeDto: {
            orderAmount: this.allAmount,
            chId: this.careHistory.chId,
            regId: this.careHistory.regId,
            patientName: this.careHistory.patientName
          },
          orderChargeItemDtoList: []
        }
        // 组装收费详情表数据
        this.itemObjs.filter(item => {
          console.log(item)
          const orderItem = {
            itemId: item.itemId,
            coId: item.coId,
            itemName: item.itemName,
            itemPrice: item.price,
            itemNum: item.num,
            itemType: item.itemType,
            itemAmount: item.allAmount
          }
          // 完整的收费数据与收费详情数据
          postObj.orderChargeItemDtoList.push(orderItem)
        })
        // 进行 现金支付操作
        this.loading = true
        this.loadingText = '订单创建并现金支付中.......'

        this.$confirm('就否确定创建订单并使用现金支付?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log(postObj)
          createOrderChargeWithCash(postObj).then(res => {
            if (res.code !== 200) {
              this.msgSuccess(res.msg)
              return
            }
            this.msgSuccess('订单创建并现金支付成功')
            this.resetCurrentParams()
            this.loading = false

            // 清空选中的数据
            this.itemObjs = []
          }).catch(() => {
            this.msgError('创建订单支付失败')
            this.loading = false
          })
        }).catch(() => {
          this.msgError('创建已取消')
          this.loading = false
        })
      }
    },
    // 支付宝支付
    handlePayWithZfb() {
      if (!this.careHistory.regId) {
        this.msgError('请输入挂号单ID查询')
        return
      } else if (this.itemObjs.length === 0) {
        this.msgError('请选择至少一个项目进行支付')
        return
      } else {
        // 组装收费表数据
        // orderChargeDto --- orderChargeItemDtoList 后端接收名称一致
        const postObj = {
          orderChargeDto: {
            orderAmount: this.allAmount,
            chId: this.careHistory.chId,
            regId: this.careHistory.regId,
            patientName: this.careHistory.patientName
          },
          orderChargeItemDtoList: []
        }
        // 组装收费详情表数据
        console.log(this.itemObjs)
        this.itemObjs.filter(item => {
          const orderItem = {
            itemId: item.itemId,
            coId: item.coId,
            itemName: item.itemName,
            itemPrice: item.price,
            itemNum: item.num,
            itemType: item.itemType,
            itemAmount: item.amount
          }
          // 完整的收费数据与收费详情数据
          postObj.orderChargeItemDtoList.push(orderItem)
        })
        // 进行 支付宝支付操作
        this.loading = true
        this.loadingText = '订单创建支付宝进行支付中.......'

        this.$confirm('就否确定创建订单并使用支付宝进行支付?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log(postObj)
          createOrderChargeWithZfb(postObj).then(res => {
            this.payObj = res.data
            console.log(this.payObj)
            this.msgSuccess('订单创建成功请进行扫码支付！！！')

            const _this = this
            // 打开弹出层
            _this.openPay = true
            // 定时轮询
            _this.intervalObj = setInterval(function() {
              // 根据ID 查询订单信息
              queryOrderChargeOrderId(_this.payObj.orderId).then(res => {
                // 如果订单状态是支付完成
                if (res.data.orderStatus === '1') {
                  // 清空定时器
                  clearInterval(_this.intervalObj)
                  _this.$notify({
                    title: '支付成功',
                    type: 'success',
                    message: '【' + _this.payObj.orderId + '】的订单操作支付成功'
                  })
                  // 清空患者和处方数据
                  _this.resetCurrentParams()
                  // 关闭弹出层
                  _this.openPay = false
                }
              }).catch(() => {
                // 清空定时器
                clearInterval(_this.intervalObj)
              })
            }, 2000)
            // this.resetCurrentParams()
            this.loading = false
            // 清空选中的数据
            this.itemObjs = []
          }).catch(() => {
            this.msgError('创建订单支付失败')
            this.loading = false
          })
        }).catch(() => {
          this.msgError('创建已取消')
          this.loading = false
        })
      }
    },
    // 如果用户没有支付，而弹出层被关闭了
    handleClose() {
      this.$confirm('您确定放弃支付吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.msgError('您已放弃支付，可以回到收费查询列表里面再次支付')
        this.openPay = false
        // 关闭轮询
        clearInterval(this.intervalObj)
      }).catch(() => {
        this.msgSuccess('欢迎继续支付')
      })
    },
    // 清空careHistory(患者)和careOrders(处方数据)
    resetCurrentParams() {
      this.careHistory = {}
      this.careOrders = []
    }

  }
}
</script>

<style scoped>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {

    width: 90px;
    color: #99a9bf;

  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
